<!--
 * @description: 
 * @Date: 2022-11-24 19:18:43
 * @example: 
 * @params: 
-->
<template>
  <div class="MapContainer">
    <Mapbox/>
    <h3>Demo 省市区 联动</h3>
    <v-distpicker @selected="onSelected"></v-distpicker>
    {{fullAddress}}
  </div>
</template>
<script>
import Mapbox from '@/components/Mapbox.vue'
export default {
  data() {
    return {
      selected:{
        province:"",
        city:"",
        area:""
      }
    }
  },
  mounted(){

  },
  computed:{
    fullAddress:function(){
            return this.selected.province +"-"+ this.selected.city +"-"+ this.selected.area
        }
  },
  methods:{
    onSelected(data){
      const { province,city,area} = data ;
      if(!province.code && !city.code && !city.code) return;
      this.selected.province = province.value;
      this.selected.city = city.value;
      this.selected.area = area.value;
    }
  },
  components:{
    Mapbox
  }
}
</script>
<style scoped>
.MapContainer{
  width: 500px;
  height: 500px;
}
</style>
